<template>
  <div>
    <el-card class="box-card">
      <div slot="header" >
        <b>官方资讯</b>
        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <div>
        <el-image :src="src">
        </el-image>
      </div>
      <div v-for="item in realTimeInfo" :key="item.id" class="text item">
        <div style="width: 100%">
          <a class="realTimeInfo-a" :href="item.link_url"><el-tag type="info" size="mini">{{item.flag.tag_name}}</el-tag>{{item.title}}</a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      realTimeInfo: [],
      src: ''
    }
  },
  created () {},
  // DOM对象加载完成时
  mounted () {
    this.getMonthHot()
  },
  methods: {
    async getMonthHot () {
      const { data: res } = await this.$http.get('/article/api/v1/article/real_time_info', { responseType: 'json' })
      if (res.code !== 0) {
        console.log('请求失败！')
      } else {
        this.realTimeInfo = res.data
        res.data.forEach((item) => {
          if (item.flag.tag_name === this.$realTimeInfo) {
            this.src = item.headimg
          }
        })
        // console.log(res.data)
      }
    }
  },
  computed: {},
  name: 'realTimeInfo'
}
</script>

<style lang="less" scoped>
.el-tag.el-tag--info{
  background-color: #c3ccd9 ;
  border-color: #c3ccd9;
  color: #fff;
}
.realTimeInfo-a{
  margin:3px 0;
  display:block;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>
